<script setup>
import {ref, onMounted, reactive, onUpdated, defineProps, computed} from "vue";
import {useRouter, useRoute} from "vue-router";
import {removeToken} from "../../utils/auth";
import {useCounterStore} from "../../pina/index";
import resetPwd from "./components/resetPwd.vue";
import {jihuoma} from "../../api/index";
import {h} from "vue";
import userl from "./user.vue";
import {ElNotification} from "element-plus";
import userInfo from "./components/userInfo.vue";
const store = useCounterStore();
const prop = defineProps({
  msg: String,
  bac: {default: false},
});
const router = useRouter();

const handleSelect = (e) => {
  console.log(e);
  router.push({
    name: `${e}`,
  });
};

// 一个计算属性 ref

const user = computed(() => {
  return store.user;
});
const rules = reactive({
  activateCode: [{required: true, message: "激活码不能为空", trigger: "blur"}],
});
const activeIndex2 = ref("shop");
</script>

<template>
  <div>
    <header class="header">
      <!-- <logo   /> -->
      <div class="bannder">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color=""
          active-text-color="rgb(78 168 185)"
          @select="handleSelect"
        >
          <el-menu-item index="shop">店铺</el-menu-item>
          <el-menu-item index="service">服务</el-menu-item>
          <el-menu-item index="sales">销售</el-menu-item>
          <el-menu-item index="Customer">客服</el-menu-item>
          <el-menu-item index="count">财务</el-menu-item>
          <el-menu-item index="order">订单</el-menu-item>
          <el-menu-item index="industry">行业数据</el-menu-item>
          <!-- <el-menu-item
            v-if="user.roles[0].roleName == '超级管理员'"
            index="activationCode"
            >激活码</el-menu-item
          > -->
          <!-- <el-menu-item index="5">授权</el-menu-item> -->
        </el-menu>
      </div>
      <userl />
    </header>
  </div>
  <div style="padding: 10px 10px 0 0; background-color: rgb(231, 231, 231)">
    <router-view />
  </div>
</template>

<style scoped>
.header {
  box-shadow: 0 2px 10px #8892965e;
  /* position: absolute; */
  /* background-color:rgba(255,255,255,.5); */
  /* position: absolute;  */
  width: 100%;
  z-index: 99999;
  display: flex;
  justify-content: flex-end;
  /* flex-direction: row-reverse; */
  padding: 0px 30px;
  /* background-color: rgb(0, 0, 0,.2); */
}
.lianright {
  width: 60%;
  height: 400px;
  background-color: red;
}
.lianxiang {
  margin-top: 30px;
}
.lianxiang li {
  font-size: 18px;
  line-height: 50px;
  color: rgb(102, 102, 102);
}
.fandh {
  font-size: 24px;
  font-weight: 700;
  color: rgb(127, 127, 127);
}
.sdsda {
  font-size: 16px !important;
}
.lianty {
  text-align: center;
  font: 15px/140% Arial, "宋体", Helvetica, sans-serif, Verdana;
  color: #5a5a5a;
}
.boleft {
  width: 40%;
  height: 400px;
  padding: 20px;
}
.lianxi {
  display: flex;

  width: 1200px;
  margin: auto;
  margin-top: 20px;
  border: 1px solid rgb(243, 243, 243);

  background-color: rgb(251, 251, 251);
}
:deep(.el-dialog) {
  border-radius: 10px;
  margin-top: 1vh;
}
.bm-view {
  width: 100%;

  height: 100%;
}
.el-dropdown-menu {
  padding: 0 !important;
}
:deep(.el-dropdown-menu__item) {
  padding: 0;
}

:deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__item.is-active) {
  color: rgb(78 168 185);
}
:deep(.el-tabs__active-bar) {
  background-color: rgb(78 168 185) !important;
}
:deep(.el-tabs__item:hover) {
  color: rgb(78 168 185);
}

.xiangc {
  background-color: rgb(251, 251, 251);
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}
.xiangc li {
  cursor: pointer;
  width: 20%;
  height: 200px;
}
.xiangc li img {
  width: 100%;
  height: 80%;
  transition: all 0.2s linear;
}
:deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__item.is-active) {
  color: rgb(78 168 185);
}
:deep(.el-tabs__active-bar) {
  background-color: rgb(78 168 185) !important;
}
:deep(.el-tabs__item:hover) {
  color: rgb(78 168 185);
}
/* .xiangc li:hover{
  img{
    transition: all .2s linear;
   transform: scale(1.1);
  }
} */

.xiangc li p {
  text-align: center;
  font-size: 16px;
}

.clace {
  padding: 30px;
  width: 1200px;
  margin: auto;
  /* width: 200px;
height: 200px; */
  /* background-color: red; */
}
.serch {
  display: flex;
  align-items: center;
  width: 180px;
}
.header {
  /* position: absolute; */
  /* background-color:rgba(255,255,255,.5); */
  /* position: absolute;  */
  width: 100%;
  z-index: 99999;
  display: flex;
  justify-content: flex-end;
  /* flex-direction: row-reverse; */
  padding: 0px 30px;
  /* background-color: rgb(0, 0, 0,.2); */
}
:deep(.el-sub-menu__title) {
  font-size: 16px;
  color: #fff !important;
}
.bannder {
  margin-left: 50px;

  width: 70%;
}
:deep(.el-menu) {
  background: rgba(0, 0, 0, 0);
}

:deep(.el-menu-item) {
  font-size: 16px;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
  color: rgb(78 168 185) !important;
  background-color: rgba(0, 0, 0, 0.5);
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(
    .el-menu--horizontal .el-menu .el-menu-item,
    .el-menu--horizontal .el-menu .el-sub-menu__title
  ) {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
:deep(.el-menu-item:hover) {
  color: rgb(78 168 185) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  color: rgb(78 168 185) !important;
}
.el-menu--horizontal.el-menu {
  border-bottom: 0;
}
</style>
